<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	 <style type="text/css">
	 table thead tr th {
	 	text-align:center;
	 }
 </style>
</head>
<body>

<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<!-- <script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script> -->
<div id="root" style="padding:20px;">

 <div class="panel panel-primary">
 <div class="panel-heading">用户管理</div>
 <table class="table table-bordered table-striped text-center">
 <thead>
 <tr>
 <th>用户名</th>
 <th>年龄</th>
 <th>毕业学校</th>
 <th>备注</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <template v-for="row in rows ">
 <tr><td>{{row.Name}}</td><td>{{row.Age}}</td><td>{{row.School}}</td><td>{{row.Remark}}</td>
 <td><a href="#" @click="Edit(row)">编辑</a>  <a href="#" @click="Delete(row.Id)">删除</a></td>
 </tr>
 </template>
 <tr>
 <td><input type="text" class="form-control" v-model="rowtemplate.Name" /></td>
 <td><input type="text" class="form-control" v-model="rowtemplate.Age" /></td>
 <td><select class="form-control" v-model="rowtemplate.School">
 　　　　　　　　　　　　　　　　 <option>中山小学</option>
 　　　　　　　　　　　　　　　　<option>复兴中学</option>
 　　　　　　　　　　　　　　　　<option>光明小学</option>
　　　　　　　　　　　　　　　　</select></td>
 <td><input type="text" class="form-control" v-model="rowtemplate.Remark" /></td>
 <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
 </tr>
 <tr>
 	<td></td>
 	<td></td>
 	<td></td>
 	<td></td>
 	<td><button class='btn btn-block' @click='Sort()'>排序</button></td>
 </tr>
 </tbody>
 </table>
 </div>
</div>	
<script>

 //ViewModel
 var vm = new Vue({
	 el: '#root',
	 data: {
		 rows: [
		 { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' },
		 { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' },
		 { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' },
		 { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' },
		 { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
		 ],
		 rowtemplate: { Id: 0, Name: '', Age: '', School: '', Remark: '' },
		},
	 methods: {	
		 Save: function (event) {
		 if (this.rowtemplate.Id == 0) {
			 //设置当前新增行的Id
			 this.rowtemplate.Id = this.rows.length + 1;
			 this.rows.push(this.rowtemplate);
	 	 }
	  
		 //还原模板
	 	this.rowtemplate = { Id: 0, Name: '', Age: '', School: '', Remark: '' }
	    },
		 Delete: function (id) {
		 //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理。
			 for (var i=0;i<this.rows.length;i++){
			 if (this.rows[i].Id == id) {
				 this.rows.splice(i, 1);
				 break;
			 }
			 }
		 },
		 Edit: function (row) {
			 this.rowtemplate = row;
			 console.log(row)
		},
	},
	computed : {//会有缓存功能
		Sort : function(){

			var temp = null;
			for( var i=0;i<this.rows.length;i++ ){
				for(var j=i+1;j<=this.rows.length-1;j++){
					if(this.rows[i].Age<this.rows[j].Age){
						temp = this.rows[i];
						this.rows[i] = this.rows[j];
						this.rows[j] = temp;
					}
				}
			}
			// console.log(this.rows)
			this.rows = this.rows.slice()
			// console.log(this.rows)
			
		},
	}
 });
 </script>
</body>
</html>